<!DOCTYPE html>




<html class="theme-next pisces" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







  

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-james.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-james.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="交互,UI," />





  <link rel="alternate" href="/atom.xml" title="郑保乐的博客" type="application/atom+xml" />






<meta name="description" content="关于全屏宫格图标，超级课程表的“发现”是目前我见过的最好的解决方案，流畅的动画打破了布局单一带来的死板气氛。下面就来介绍这样的动画是如何实现的。">
<meta name="keywords" content="交互,UI">
<meta property="og:type" content="article">
<meta property="og:title" content="GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画">
<meta property="og:url" content="https://james.letec.top/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/index.html">
<meta property="og:site_name" content="郑保乐的博客">
<meta property="og:description" content="关于全屏宫格图标，超级课程表的“发现”是目前我见过的最好的解决方案，流畅的动画打破了布局单一带来的死板气氛。下面就来介绍这样的动画是如何实现的。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://img.blog.csdn.net/20170615223623150?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemJsMTE0NjU1NjI5OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
<meta property="og:updated_time" content="2018-03-29T14:30:40.399Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画">
<meta name="twitter:description" content="关于全屏宫格图标，超级课程表的“发现”是目前我见过的最好的解决方案，流畅的动画打破了布局单一带来的死板气氛。下面就来介绍这样的动画是如何实现的。">
<meta name="twitter:image" content="http://img.blog.csdn.net/20170615223623150?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemJsMTE0NjU1NjI5OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":false,"async":true,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: 'DQH9NUSGTQ',
      apiKey: 'dd999b30a63c88fb422dc71142c6b7bc',
      indexName: 'jamesblog_hexo',
      hits: {"per_page":10},
      labels: {"input_placeholder":"搜索文章标题或内容","hits_empty":"没有在这个星球上找到: ${query}","hits_stats":"共找到 ${hits} 条结果，用时： ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://james.letec.top/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/"/>





  <title>GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画 | 郑保乐的博客</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?8c29d46a5fdb9bba0c5b918524bba2c0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">郑保乐的博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">James' Blog</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  
  <div class="algolia-popup popup search-popup">
    <div class="algolia-search">
      <div class="algolia-search-input-icon">
        <i class="fa fa-search"></i>
      </div>
      <div class="algolia-search-input" id="algolia-search-input"></div>
    </div>

    <div class="algolia-results">
      <div id="algolia-stats"></div>
      <div id="algolia-hits"></div>
      <div id="algolia-pagination" class="algolia-pagination"></div>
    </div>

    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
  </div>




    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://james.letec.top/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="郑保乐">
      <meta itemprop="description" content="优秀的判断力来自经验，<br>但经验来自错误的判断。">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郑保乐的博客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-06-15T22:41:00+08:00">
                2017-06-15
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
              <span class="post-meta-divider">|</span>
              <span class="post-meta-item-icon">
                <i class="fa fa-comment-o"></i>
              </span>
              
                <a href="/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/#SOHUCS" itemprop="discussionUrl">
                  <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/" itemprop="commentsCount"></span>
                </a>
              
            
          

          
          
             <span id="/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/" class="leancloud_visitors" data-flag-title="GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读次数&#58;</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2,062 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  11 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p><font size="3">关于</font><font size="6">全屏宫格图标</font><font size="3">，超级课程表的“发现”是目前我见过的最好的解决方案，流畅的动画打破了布局单一带来的死板气氛。下面就来介绍这样的动画是如何实现的。<br><a id="more"></a><br></font></p><p><br></p><p><font size="3">首先创建一个activity叫BiaoDiscoverActivity</font></p><p><font size="3">此处用到了Handler，<font style="NoForceAllFonts By Microsoft YaHei&quot;,HighLevelEmoji,&quot;Catcat520.Lite.Latin&quot;,&quot;SDF.TypeSetCtrlFonts&quot;,&quot;SDF.CnSymbol&quot;,&quot;SDF.EnSymbol&quot;,&quot;SDF.Number&quot;,此处填写英文字体,&quot;此处填写 font-family 的名称&quot;,&quot;Envy Code R&quot;,Inconsolata,&quot;Envy Code R&quot;,&quot;Open Sans&quot;,Roboto,&quot;Segoe UI&quot;,&quot;Helvetica Neue&quot;,&quot;Lucida Grande&quot;,Ubuntu,Tahoma,Verdana,Menlo,Monaco,此处填写中文字体,&quot;SDF.FixScTcFonts&quot;,&quot;SDF.Hangul&quot;,&quot;Microsoft YaHei&quot;,&quot;Microsoft YaHei&quot;,&quot;Microsoft JhengHei&quot;,&quot;Microsoft YaHei UI&quot;,&quot;Microsoft JhengHei UI&quot;,fp-font,AccessibilityFoundicons,&quot;Accessibility Foundicons&quot;,anchorjs-icons,brandico,Brandico,brankic1979,Brankic1979,&quot;brankic 1979&quot;,&quot;Brankic 1979&quot;,broccolidry,Broccolidry,bundlestars,chagaan,CONDENSEicon,cuticons,Cuticons,dashicons,duotai,duotai-status,&quot;Dot Com&quot;,ecoico,Ecoico,EightiesShades,ElegantIcons,elusive,Elusive,Elusive-Icons,entypo,Entypo,&quot;Entypo Social&quot;,Entypo-Social,&quot;Erler Dingbats&quot;,et-line,Et-line,FabricMDL2Icons,feedfont,fontawesome,FontAwesome,fontelico,Fontelico,fontello,Fontello,Garqag,GeneralEnclosedFoundicons,&quot;General Enclosed Foundicons&quot;,GeneralFoundicons,&quot;General Foundicons&quot;,Gibson,&quot;Gibson Light&quot;,gibson_lightbold,Gibson_lightbold,gibson_lightitalic,Gibson_lightitalic,gibsonregular,Gibsonregular,&quot;Glyphicons Halflings&quot;,&quot;GLYPHICONS Halflings&quot;,&quot;Heydings Controls&quot;,&quot;Heydings Icons&quot;,icft_temai,icft_temai_index,iconminia,Iconminia,iconvault,Iconvault,icomoon,Icomoon,iconfont,iconfont-tcl,iconic,Iconic,icons,Icons,ifanrx,iknow-qb_share_icons,&quot;Just Vector&quot;,JustVector,JustVectorRegular,LenovoSupport,linecons,Linecons,lobi-pc,LondonMM,londonmmregular,Londonmmregular,mainicon,maki,Maki,Mainicon,&quot;Material Icons Extended&quot;,Material-Design-Icons,MENKSOF0,Menksoft2007,Menksoft2012,MenksoftQagan,meteocons,Meteocons,MeteoconsRegular,mfglabs,Mfglabs,&quot;MFG Labs Iconset&quot;,mfg_labs_iconsetregular,Mfg_labs_iconsetregular,modernpics,Modernpics,&quot;Modern Pictograms&quot;,o365Icons,Office365Icons,&quot;OpenWeb Icons&quot;,PulsarJS,RaphaelIcons,rondo,Rondo,sellerCenter,sdp-icons,silkcons,Silkcons,SocialFoundicons,&quot;Social Foundicons&quot;,Socialico,&quot;Socialico Plus&quot;,&quot;Social Networking Icons&quot;,Sosa,&quot;Symbol Signs&quot;,&quot;Symbol Signs Basis set&quot;,typicons,Typicons,VideoJS,weathercons,Weathercons,websymbols,Websymbols,&quot;Web Symbols&quot;,&quot;Web Symbols Liga&quot;,wpzoom,Wpzoom,Yglyphs-legacy,youkuMobile,zocial,Zocial,&quot;PingFang SC&quot;,&quot;PingFang TC&quot;,&quot;PingFang HK&quot;,&quot;Noto Sans CJK SC&quot;,&quot;Noto Sans CJK TC&quot;,&quot;Noto Sans CJK JP&quot;,&quot;Source Han Sans SC&quot;,&quot;Source Han Sans TC&quot;,&quot;Source Han Sans&quot;,SimSun,LowLevelEmoji,&quot;Segoe UI Symbol&quot;,&quot;Segoe UI Historic&quot;,Symbola,Quivira,Meiryo,&quot;Malgun Gothic&quot;,NSimSun,MingLiU,MingLiU_HKSCS,SimSun-ExtB,MingLiU-ExtB,MingLiU_HKSCS-ExtB,&quot;Nimbus Roman No9 L&quot;,&quot;WenQuanYi Micro Hei&quot;,&quot;WenQuanYi Zen Hei&quot;,&quot;Droid Sans Fallback&quot;,&quot;Hiragino Sans GB&quot;,Symbol,FZSongS,&quot;Simsun (Founder Extended)&quot;,&quot;Microsoft Himalaya&quot;,&quot;Microsoft New Tai Lue&quot;,&quot;Microsoft PhagsPa&quot;,&quot;Microsoft Tai Le&quot;,&quot;Microsoft Uighur&quot;,&quot;Microsoft Yi Baiti&quot;,&quot;Mongolian Baiti&quot;,&quot;Estrangelo Edessa&quot;,Ebrima,Euphemia,Nyala,&quot;Plantagenet Cherokee&quot;,sylfaen,&quot;Arial Unicode MS&quot;,Code2000,HanaMinA,HanaMinB,Unifont; text-indent:28px" face="&quot;" color="#333333">Handler主要用于异步消息的处理：当发出一个消息之后，首先进入一个消息队列，发送消息的函数即刻返回，而另外一个部分在消息队列中逐一将消息取出，然后对消息进行处理，也就是发送消息和接收消息不是同步的处理。 这种机制通常用来处理相对耗时比较长的操作</font></font></p><p><br></p><pre name="code" class="java">public class BiaoDiscoverActivity extends BaseActivity {<br><br>    @Bind(R.id.ivBiaoClose)<br>    ImageView mIvClose;<br>    @Bind(R.id.rll_found_note)<br>    AutoRelativeLayout mrllNote;<br>    @Bind(R.id.rll_found_exam_time)<br>    AutoRelativeLayout mrllExamTime;<br>    @Bind(R.id.rll_found_class_room_search)<br>    AutoRelativeLayout mrllClassroom;<br>    @Bind(R.id.rll_found_score_search)<br>    AutoRelativeLayout mrllScore;<br>    @Bind(R.id.rll_found_super_act)<br>    AutoRelativeLayout mrllSuperAct;<br>    @Bind(R.id.rll_found_super_group)<br>    AutoRelativeLayout mrllSuperGroup;<br>    @Bind(R.id.rll_found_train_tickets)<br>    AutoRelativeLayout mrllTrainTickets;<br>    @Bind(R.id.rll_found_air_tickets)<br>    AutoRelativeLayout mrllAirTickets;<br>    @Bind(R.id.rll_found_school_recuit)<br>    AutoRelativeLayout mrllSchoolRecuit;<br>    @Bind(R.id.rll_found_house_rent)<br>    AutoRelativeLayout mrllHouseRent;<br>    @Bind(R.id.rll_found_entertainment_class)<br>    AutoRelativeLayout mrllEntertainment;<br><br>    //宫格图标<br>    private List&lt;AutoRelativeLayout&gt; rllList;<br>    private Handler handler;<br><br>    @Override<br>    protected BasePresenter createPresenter() {<br>        return null;<br>    }<br><br>    @Override<br>    protected int provideContentViewId() {<br>        return R.layout.activity_biao_discover;<br>    }<br><br><br>    @Override<br>    public void initView() {<br>        super.initView();<br>        initRll();<br>        initGrid();<br>        handler = new Handler();<br>    }<br><br>    private synchronized void initRll() {<br>        rllList = new ArrayList&lt;&gt;();<br>        rllList.add(mrllNote);<br>        rllList.add(mrllExamTime);<br>        rllList.add(mrllClassroom);<br>        rllList.add(mrllScore);<br>        rllList.add(mrllSuperAct);<br>        rllList.add(mrllSuperGroup);<br>        rllList.add(mrllTrainTickets);<br>        rllList.add(mrllAirTickets);<br>        rllList.add(mrllSchoolRecuit);<br>        rllList.add(mrllHouseRent);<br>        rllList.add(mrllEntertainment);<br>    }<br><br>    @Override<br>    protected void onResume() {<br>        super.onResume();<br>        itemsAnimation();<br>    }<br><br>    private void initGrid() {<br>        for (int i = 0; i &lt; rllList.size(); i++) {<br>            int finalI = i;<br>            //先全部隐藏<br>            rllList.get(finalI).setVisibility(View.GONE);<br>        }<br>    }<br><br>    private void itemsAnimation() {<br>        handler.postDelayed(new Runnable() {<br>            @Override<br>            public void run() {<br>                for (int i = 0; i &lt; rllList.size(); i++) {<br>                    int finalI = i;<br>                    //先全部隐藏<br>                    rllList.get(finalI).setAlpha(0);<br>                    rllList.get(finalI).setVisibility(View.VISIBLE);<br>                }<br>                for (int i = 0; i &lt; rllList.size(); i++) {<br>                    int finalI = i;<br>                    handler.postDelayed(new Runnable() {<br>                        @Override<br>                        public void run() {<br>                            //设置透明度为全不透明<br>                            rllList.get(finalI).setAlpha(1);<br>                            //再执行动画<br>                            rllList.get(finalI).startAnimation(AnimationUtils.loadAnimation(BiaoDiscoverActivity.this, R.anim.grid_items_scale));<br>                        }<br>                    }, 0 + i * 30);<br>                }<br>            }<br>        }, 200);<br><br>    }<br><br>    @Override<br>    public void initListener() {<br>        super.initListener();<br>        mIvClose.setOnClickListener(v -&gt; {<br>            finish();<br>            exitAct();<br>        });<br>        mrllClassroom.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_CLASSROOM_SEARCH));<br>        mrllScore.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_SCORE_RESULT_SEARCH));<br>        mrllSuperGroup.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_SUPER_GROUP));<br>        mrllTrainTickets.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_TRAIN_BUS_TICKETS));<br>        mrllSchoolRecuit.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_SCHOOL_RECUIT));<br>        mrllAirTickets.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_AIR_TICKETS));<br>        mrllHouseRent.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_HOUSE_RENT));<br>        mrllEntertainment.setOnClickListener(v -&gt; jumpToWebViewActivity(AppConst.H5_ENTERTAINMANIT_CLASS));<br>    }<br><br>    @Override<br>    public boolean onKeyDown(int keyCode, KeyEvent event) {<br>        if (keyCode == KeyEvent.KEYCODE_BACK) {<br>            finish();<br>            exitAct();<br>            return true;<br>        }<br>        return super.onKeyDown(keyCode, event);<br>    }<br><br>    private void exitAct() {<br>        UIUtils.startWindowAnimation(this, R.anim.window_as_pop_fade_in, R.anim.window_as_pop_fade_out);<br>    }<br>}</pre><p></p><p><br></p><font size="3">其父类为一个抽象类BaseActivity,子类中的各个重写方法在父类中的执行顺序如下</font><p><br></p><p></p><pre name="code" class="java">protected void onCreate(@Nullable Bundle savedInstanceState) {<br>        super.onCreate(savedInstanceState);<br><br>        setContentView(provideContentViewId());<br>        ButterKnife.bind(this);<br><br>        initView();<br>        initListener();<br>        initData();<br><br>    }</pre><p></p><p><br></p><font size="3">这样，只需在子类中重写provideContentViewId()方法，返回子类的content布局资源文件的值就可以了，子类不再需要设置布局ID，也不再需要每次调用ButterKnife.bind()</font><p><br></p><p><font size="6">下面是重点</font></p><p><font size="3">宫格布局的实现</font></p><p><font size="3">以下是BiaoDiscoverActivity的布局资源文件</font></p><p><font size="3">首先向 zhy 的 AutoLayout 表示感谢</font></p><p></p><pre name="code" class="html">&lt;?xml version=”1.0” encoding=”utf-8”?&gt;<br>&lt;com.zhy.autolayout.AutoRelativeLayout<br>    xmlns:android=”<a href="http://schemas.android.com/apk/res/android&quot;" target="_blank" rel="noopener">http://schemas.android.com/apk/res/android&quot;</a><br>    android:layout_width=”match_parent”<br>    android:layout_height=”match_parent”&gt;<br><br>    &lt;com.zhy.autolayout.AutoRelativeLayout<br>        xmlns:android=”<a href="http://schemas.android.com/apk/res/android&quot;" target="_blank" rel="noopener">http://schemas.android.com/apk/res/android&quot;</a><br>        android:layout_width=”match_parent”<br>        android:layout_height=”wrap_content”<br>        android:background=”@drawable/ic_found_bg”<br>        android:paddingBottom=”@dimen/biao_discover_root_padding_bottom”<br>        android:paddingTop=”@dimen/biao_discover_root_padding_top”<br>        &gt;<br><br>        &lt;include<br>            layout=”@layout/include_toolbar”<br>            android:visibility=”gone”<br>            /&gt;<br><br>        &lt;GridLayout<br>            android:layout_width=”match_parent”<br>            android:layout_height=”match_parent”<br>            android:layout_alignParentTop=”true”<br>            android:layout_centerHorizontal=”true”<br>            android:layout_gravity=”center_horizontal”<br>            android:columnCount=”3”<br>            android:rowCount=”4”&gt;<br><br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_note”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”0”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”0”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView3”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_note_icon”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView3”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_note”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_exam_time”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”1”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”0”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView4”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_countdown_icon”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView4”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_exam_time”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_class_room_search”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”2”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”0”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView5”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_room_search”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView5”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_classroom_search”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_score_search”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”0”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”1”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView6”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_score_search”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView6”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_score_search”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_super_act”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”1”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”1”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView7”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_super_act”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView7”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_super_act”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_super_group”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”2”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”1”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView8”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_super_group”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView8”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_super_group”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_train_tickets”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”0”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”2”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView9”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_bus”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView9”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_train_bus_tickets”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_air_tickets”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”1”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”2”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView10”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_airplane”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView10”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_air_tickets”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_school_recuit”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”2”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”2”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView11”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_school_recuit”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView11”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_school_recuit”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_house_rent”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”0”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”3”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView12”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_rent_house”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView12”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_house_rent”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>            &lt;com.zhy.autolayout.AutoRelativeLayout<br>                android:id=”@+id/rll_found_entertainment_class”<br>                android:layout_width=”wrap_content”<br>                android:layout_column=”1”<br>                android:layout_columnWeight=”1”<br>                android:layout_row=”3”<br>                android:layout_rowWeight=”1”<br>                android:visibility=”visible”<br>                &gt;<br><br>                &lt;ImageView<br>                    android:id=”@+id/imageView13”<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”@dimen/biao_discover_item_iv_height”<br>                    android:src=”@drawable/ic_found_entertainment_class”<br>                    android:layout_centerVertical=”true”<br>                    android:layout_centerHorizontal=”true”/&gt;<br><br>                &lt;TextView<br>                    android:layout_width=”wrap_content”<br>                    android:layout_height=”wrap_content”<br>                    android:layout_below=”@+id/imageView13”<br>                    android:layout_centerHorizontal=”true”<br>                    android:layout_marginTop=”@dimen/biao_discover_item_tv_margin_top”<br>                    android:text=”@string/biao_entertainment_class”<br>                    android:textColor=”@color/gray2”<br>                    android:textSize=”@dimen/biao_discover_item_tv_text_size”/&gt;<br>            &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br>        &lt;/GridLayout&gt;<br>    &lt;/com.zhy.autolayout.AutoRelativeLayout&gt;<br><br>    &lt;ImageView<br>        android:id=”@+id/ivBiaoClose”<br>        android:layout_width=”90dp”<br>        android:layout_height=”wrap_content”<br>        android:layout_alignParentBottom=”true”<br>        android:layout_centerHorizontal=”true”<br>        android:adjustViewBounds=”true”<br>        android:src=”@drawable/selector_found_close_btn”/&gt;<br>&lt;/com.zhy.autolayout.AutoRelativeLayout&gt;</pre><br><font size="3">这个宫格布局的实现方法不是唯一的，但以上实现方法可以保证95%以上的相似，以上用到的所有图标资源请自行搜索</font><p></p><p><font size="3">下面是实现后的效果</font></p><p><font size="3"><br></font></p><p><img src="http://img.blog.csdn.net/20170615223623150?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemJsMTE0NjU1NjI5OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" _xhe_src="http://img.blog.csdn.net/20170615223623150?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemJsMTE0NjU1NjI5OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" width="200" align="middle"><br></p><p><br></p><p><font size="3">需要注意的是，布局中的图标应避免处于父布局的边缘位置，因为执行动画过程中，尤其是缩放动画，超出父布局的部分不会显示</font></p><p><font size="3">图标的缩放动画在同样在XML文件中进行定义，这里用到了两个缩放动画，可以设置第二个动画开始时间偏移量为第一个动画的时长，这样可以使最终效果非常自然、连贯，此处加入一个透明度渐变动画，和原版更为贴近</font></p><p><font size="3"><br></font></p><p><font size="3"></font></p><pre name="code" class="html">&lt;?xml version=”1.0” encoding=”utf-8”?&gt;<br>&lt;set xmlns:android=”<a href="http://schemas.android.com/apk/res/android&quot;" target="_blank" rel="noopener">http://schemas.android.com/apk/res/android&quot;</a>&gt;<br>    &lt;scale<br>        android:duration=”75”<br>        android:fromXScale=”0.5”<br>        android:fromYScale=”0.5”<br>        android:interpolator=”@android:anim/decelerate_interpolator”<br>        android:pivotX=”50%”<br>        android:pivotY=”50%”<br>        android:startOffset=”0”<br>        android:toXScale=”1”<br>        android:toYScale=”1”/&gt;<br>    &lt;scale<br>        android:duration=”75”<br>        android:fromXScale=”1.2”<br>        android:fromYScale=”1.2”<br>        android:interpolator=”@android:anim/decelerate_interpolator”<br>        android:pivotX=”50%”<br>        android:pivotY=”50%”<br>        android:startOffset=”75”<br>        android:toXScale=”1”<br>        android:toYScale=”1”/&gt;<br><br>    &lt;alpha<br>        android:duration=”100”<br>        android:fromAlpha=”0”<br>        android:toAlpha=”1”/&gt;<br>&lt;/set&gt;</pre><br><p></p><p><font size="3">底部的关闭按钮用selector的形式定义，实现点击的效果</font></p><p><font size="3"><br></font></p><pre name="code" class="html">&lt;?xml version=”1.0” encoding=”utf-8”?&gt;<br>&lt;selector xmlns:android=”<a href="http://schemas.android.com/apk/res/android&quot;" target="_blank" rel="noopener">http://schemas.android.com/apk/res/android&quot;</a>&gt;<br>    &lt;item android:drawable=”@drawable/ic_found_close_press” android:state_pressed=”true”/&gt;<br>    &lt;item android:drawable=”@drawable/ic_found_close” android:state_enabled=”false”/&gt;<br>&lt;/selector&gt;</pre><br><p></p><p><font size="3"><br></font></p><p><font size="3"><br></font></p><p><font size="3"><br></font></p><p><br></p>

      
    </div>
    
    
    

    

    <!-- s reward 默认位置 -->

    <!-- e resume 默认位置 -->
    
      <div>
        <ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者：</strong>
    郑保乐
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://james.letec.top/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/" title="GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画">https://james.letec.top/2017/06/15/GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>
    本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0</a> 许可协议。转载请注明出处！
  </li>
</ul>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/交互/" rel="tag"># 交互</a>
          
            <a href="/tags/UI/" rel="tag"># UI</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/12/01/在 SpringMVC 中对表单提交参数进行验证 Bean Validator/" rel="prev" title="在 SpringMVC 中对表单提交参数进行验证（使用 Bean Validator）">
                在 SpringMVC 中对表单提交参数进行验证（使用 Bean Validator） <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style"><span class="jiathis_txt">分享到：</span>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_cqq"></a>
<a class="jiathis_button_qq"></a>
<a class="jiathis_button_kaixin001"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_tieba"></a>
<a class="jiathis_button_renren"></a>
<a class="jiathis_button_ydnote"></a>
<a href="http://www.jiathis.com/share?uid=2160247" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
	data_track_clickback:true,
	summary:"",
	shortUrl:false,
	hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2160247" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
        <div id="cyReward" role="cylabs" data-use="reward" style="padding: 10px 0; margin: 0px auto; width: 90%; text-align: center;"></div>
      <div id="SOHUCS"></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/images/avatar.jpg"
                alt="郑保乐" />
            
              <p class="site-author-name" itemprop="name">郑保乐</p>
              <p class="site-description motion-element" itemprop="description">优秀的判断力来自经验，<br>但经验来自错误的判断。</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">32</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">7</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">31</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/JamesZBL" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="tencent://message/?uin=1146556298&Site=摆码王子" target="_blank" title="QQ">
                      
                        <i class="fa fa-fw fa-qq"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/James1996" target="_blank" title="Weibo">
                      
                        <i class="fa fa-fw fa-weibo"></i></a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:zhengbaole_1996@163.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i></a>
                  </span>
                
            </div>
          

          
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-inline">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                友情链接
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.jianshu.com/u/77df8abd9a98" title="EEE凯飞" target="_blank">EEE凯飞</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://winterchen.com/" title="WinterChen" target="_blank">WinterChen</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://wuchong.me/" title="云邪" target="_blank">云邪</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://zmister.com/" title="州的先生" target="_blank">州的先生</a>
                  </li>
                
              </ul>
            </div>
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 &mdash; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郑保乐 | James Zheng</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">一共写了&#58;</span>
    
    <span title="一共写了">43.5k字</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







  <div>
    <div style="display:inline-block; vertical-align: middle;">
        <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1273289170'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1273289170%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
    </div>

    
    <span class="post-meta-divider"></span>
    <div style="display:inline-block;">
    <a href="http://www.miitbeian.gov.cn/">冀ICP备18000182号</a>
    </div>
    
    <span class="post-meta-divider"></span>
    <div style="display:inline-block;">
        <img src="/images/beian.png" style="display: inline-block;vertical-align:middle;margin:0px,5px,5px,0px;"/>
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13010802000830">冀公网安备 13010802000830号</a>
    </div>
  </div>



        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  




  

    <script type="text/javascript">
    (function(){
      var appid = 'cytxDP7hE';
      var conf = 'e4d56467e3e0e8e707d560e87196ea24';
      var width = window.innerWidth || document.documentElement.clientWidth;
      if (width < 960) {
      window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){
        window.changyan.api.config({appid:appid,conf:conf})});
      }
    })();
    </script>
    <script type="text/javascript" src="https://assets.changyan.sohu.com/upload/plugins/plugins.count.js"></script>

    <script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytxDP7hE"></script>
  









  




  
  
  
  <link rel="stylesheet" href="/lib/algolia-instant-search/instantsearch.min.css">

  
  
  <script src="/lib/algolia-instant-search/instantsearch.min.js"></script>
  

  <script src="/js/src/algolia-search.js?v=5.1.4"></script>



  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("noQxgNi7RfBVPLkKkLSqJfgu-gzGzoHsz", "KgdngJPIsywPsYCvOUx1zF88");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


  
  

  

  

  

</body>
</html>
